<template>
    <div class="layout" ref="layout">
        <grid-layout
                :layout.sync="layout"
                :col-num="colNum"
                :row-height="30"
                :is-draggable="true"
                :is-resizable="true"
                :vertical-compact="verticalCompact"
                :margin="[10, 10]"
                :use-css-transforms="false"
                :responsive="true"
                class="hoverStyle">
            <grid-item v-for="item in layout" :key="item.i"
                       :x="item.x"
                       :y="item.y"
                       :w="item.w"
                       :h="item.h"
                       :i="item.i"
                       @move="moveEvent"
                       @moved="movedEvent"
                       style="border: 1px solid #fff">
                <div :class="['widgetItem', {'beMerge': Number(item.i) === curMergeIndex * 1}]">
                    {{item.i}}
                </div>
            </grid-item>
        </grid-layout>
    </div>
</template>

<script>
    import VueGridLayout from 'vue-grid-layout'

    export default {
        name: "LayoutGrid",
        components: {
            GridLayout: VueGridLayout.GridLayout,
            GridItem: VueGridLayout.GridItem
        },
        data() {
            return {
                layout: [{"x":0,"y":0,"w":2,"h":2,"i":"0", static: true},
                    {"x":2,"y":0,"w":2,"h":4,"i":"1", static: true},
                    {"x":4,"y":0,"w":2,"h":5,"i":"2", static: true},
                    {"x":6,"y":0,"w":2,"h":3,"i":"3", static: true},
                    {"x":8,"y":0,"w":2,"h":3,"i":"4", static: true},
                    {"x":10,"y":0,"w":2,"h":3,"i":"5", static: true},
                    {"x":0,"y":5,"w":2,"h":5,"i":"6", static: true},
                    {"x":2,"y":5,"w":2,"h":5,"i":"7", static: true},
                    {"x":4,"y":5,"w":2,"h":5,"i":"8", static: true},
                    {"x":6,"y":3,"w":2,"h":4,"i":"9", static: true},
                    {"x":8,"y":4,"w":2,"h":4,"i":"10", static: true},
                    {"x":10,"y":4,"w":2,"h":4,"i":"11", static: true},
                    {"x":0,"y":10,"w":2,"h":5,"i":"12", static: true},
                    {"x":2,"y":10,"w":2,"h":5,"i":"13", static: true},
                    {"x":4,"y":8,"w":2,"h":4,"i":"14", static: true},
                    {"x":6,"y":8,"w":2,"h":4,"i":"15", static: true},
                    {"x":8,"y":10,"w":2,"h":5,"i":"16", static: true},
                    {"x":10,"y":4,"w":2,"h":2,"i":"17", static: true},
                    {"x":0,"y":9,"w":2,"h":3,"i":"18", static: true},
                    {"x":2,"y":6,"w":2,"h":2,"i":"19", static: true}
                ],
                verticalCompact: true,
                colNum: 12, //栅格数
                moveCount: 0,
                moveCountMax: 35,
                canMove: false,
                curMergeIndex: NaN
            }
        },
        mounted(){
            this.$refs.layout.addEventListener('mouseup', (e) => {
                this.curMergeIndex = NaN;
            })
        },
        beforeDestroy(){
            this.$refs.layout.removeEventListener('mouseup')
        },
        methods: {
            moveEvent(i, x, y) {
                // this.setCanMove();
                console.log(this.moveCount);
                this.moveCount++;
                this.checkMerge(i, x, y);
                this.layout.forEach((item, index) => {
                    this.layout.splice(index, 1, {...item, static: !this.canMove})
                })
            },

            checkMerge(i, x, y) {
                const layout = JSON.parse(JSON.stringify(this.layout)).filter(({i: itemI}) => Number(itemI) !== Number(i));
                layout.find(({x: itemX, y: itemY, i: itemI}, index) => {
                    if(Number(x) === Number(itemX) && Number(y) === Number(itemY)){
                        console.log('被合并的元素索引是：', itemI);
                        this.canMove = false;
                        this.moveCount = 0;
                        this.curMergeIndex = itemI;
                    }else if(this.moveCount >= this.moveCountMax){
                        this.canMove = true;
                        this.curMergeIndex = NaN;
                    }
                })
            },
            movedEvent(e) {
                if(this.moveCount > this.moveCountMax){
                    setTimeout(() => {
                        this.moveCount = 0;
                        this.curMergeIndex = NaN;
                        this.canMove = false;
                    }, 1000)
                }
            }
        }
    }
</script>

<style scoped>
    .layout {
        background: #999;
        height: 500px;
    }

    .hoverStyle {
        border: 1px solid #999;
    }

    .widgetItem{
        width: 100%;
        height: 100%;
    }
    .widgetItem.beMerge{
        box-shadow: 0 0 7px #fff, 0 0 7px #fff, 0 0 7px #fff;
    }
</style>
